<!DOCTYPE html>
<html>
<head>
    <title>Box Selection</title>
<!--    <link rel="stylesheet" href="http://openlayers.org/en/v3.14.1/css/ol.css" type="text/css">-->
<!--    <script src="http://openlayers.org/en/v3.14.1/build/ol.js"></script> -->

    <link rel="stylesheet" href="../css/ol.css" type="text/css">
    <script src="../js/ol.js"></script>
    <style>
        .ol-dragbox {
            background-color: rgba(255,255,255,0.4);
            border-color: rgba(100,150,0,1);
        }
    </style>
</head>
<body>
<div id="map" class="map"></div>
<div id="info">No countries selected</div>
<script>
    var vectorSource = new ol.source.Vector({
        url: 'countries.geojson',
        format: new ol.format.GeoJSON()
    });

    var source = new ol.source.Vector();

    var map = new ol.Map({
        layers: [
            new ol.layer.Tile({
                source: new ol.source.OSM()
            }),
            new ol.layer.Vector({
                source: vectorSource
            })
        ],
        renderer: 'canvas',
        target: 'map',
        view: new ol.View({
            center: [0, 0],
            zoom: 2
        })
    });

    // a normal select interaction to handle click
    var select = new ol.interaction.Select();
    map.addInteraction(select);

    var selectedFeatures = select.getFeatures();

    // a DragBox interaction used to select features by drawing boxes
    var dragBox = new ol.interaction.Draw({
        source: source,
        type: 'Polygon'
    });

    map.addInteraction(dragBox);

    var infoBox = document.getElementById('info');

    dragBox.on('drawend', function() {
        // features that intersect the box are added to the collection of
        // selected features, and their names are displayed in the "info"
        // div
        var info = [];
        var extent = source.getExtent();
        vectorSource.forEachFeatureIntersectingExtent(extent, function(feature) {
            selectedFeatures.push(feature);
            info.push(feature.get('name'));
        });
        if (info.length > 0) {
            infoBox.innerHTML = info.join(', ');
        }
    });

    // clear selection when drawing a new box and when clicking on the map
    dragBox.on('drawstart', function() {
        selectedFeatures.clear();
        infoBox.innerHTML = '&nbsp;';
    });
    map.on('click', function() {
        selectedFeatures.clear();
        infoBox.innerHTML = '&nbsp;';
    });
</script>
</body>
</html>